<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          影视搜索
        </h2>
      </div>
      <!-- Page title actions -->
    </div>
    <div class="col-auto ms-auto d-print-none">
      <div class="d-flex">
        <div class="me-3">
          <div class="input-icon">
            <input id="search_word" type="text" value="" class="form-control" placeholder="Search…">
              <span class="input-icon-addon">
                <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
              </span>
            </div>
          </div>
          <input type="button" id="search_btn" value="搜索" class="btn btn-primary" onclick="javascript:search_media()"/>
        </div>
      </div>
  </div>
</div>
<!-- 业务页面代码 -->
{% if Count > 0 %}
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      {% for Item in Items  %}
      <div class="col-sm-6 col-lg-3">
        <div class="card card-sm">
          <div class="ribbon ribbon-top ribbon-bookmark {% if Item[11] > 8 %} bg-green {% elif Item[11] <= 8 and Item[11] >= 6 %} bg-blue {% else %} bg-orange {% endif %}">{{ Item[11] }}</div>
          <a href="javascript:show_download_modal('{{ Item[0] }}','{{ Item[1] }}')" class="d-block" ><img src="{{ Item[9] }}" class="card-img-top" title="点击添加下载"></a>
          <div class="card-body">
            <div class="d-flex align-items-center mb-2">
              <span class="avatar me-2 rounded">{{ Item[10] }}</span>
              <div>
                <div><a href="{{ Item[5] }}" target="_blank" title="点击下载种子文件"><strong>{{ Item[1]}}</strong></a></div>
                <div class="text-muted"><strong>{{ Item[6]}} {{ Item[2]}} {{ Item[3]}}</strong></div>
              </div>
              <div class="ms-auto">
                <span class="text-muted">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-world-upload" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                     <path d="M21 12a9 9 0 1 0 -9 9"></path>
                     <path d="M3.6 9h16.8"></path>
                     <path d="M3.6 15h8.4"></path>
                     <path d="M11.578 3a17 17 0 0 0 0 18"></path>
                     <path d="M12.5 3c1.719 2.755 2.5 5.876 2.5 9"></path>
                     <path d="M18 21v-7m3 3l-3 -3l-3 3"></path>
                  </svg>
                  {{ Item[4] }}
                </span>
              </div>
            </div>
            {% if Item[12] %}
            <div class="text-muted border-top pt-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                 <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                 <path d="M9 17h6"></path>
                 <path d="M9 13h6"></path>
              </svg>
              <small>{{ Item[12] }}</small>
            </div>
            {% endif %}
            {% if Item[13] %}
            <div class="text-muted">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /><line x1="3" y1="6" x2="3" y2="19" /><line x1="12" y1="6" x2="12" y2="19" /><line x1="21" y1="6" x2="21" y2="19" /></svg>
              <small>{{ Item[13] }}</small>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
     {% endfor %}
    </div>
  </div>
</div>
{% else %}
<div class="page-wrapper">
  <div class="container-xl">
  </div>
  <div class="page-body">
    <div class="container-xl d-flex flex-column justify-content-center">
      <div class="empty">
        <div class="empty-img"><img src="./static/img/posting_photo.svg" height="128"  alt="">
        </div>
        <p class="empty-title" id="search_tip_title">没有记录</p>
        <p class="empty-subtitle text-muted" id="search_tip_text">
          输入想看的电影、电视剧名称，点击搜索试试看吧。
        </p>
      </div>
    </div>
  </div>
</div>
{% endif %}
<div class="modal modal-blur fade" id="download-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-title">确认提示</div>
        <div id="download_start_message">是否立即下载该资源？</div>
      </div>
      <div class="modal-footer">
        <input type="hidden" id="download_start_id" />
        <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-danger" id="download_start_btn">确定</button>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="download-modal-success" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-success"></div>
      <div class="modal-body text-center py-4">
        <!-- Download SVG icon from http://tabler-icons.io/i/circle-check -->
        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><path d="M9 12l2 2l4 -4" /></svg>
        <h3>成功</h3>
        <input type="hidden" id="download_start_name" />
        <div class="text-muted" id="download_finished_str">添加下载成功！</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col"><a href="#" class="btn btn-success w-100" data-bs-dismiss="modal">
                确定
              </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  // 关键字
  search_word = "{{ SearchWord }}";
  need_search = "{{ NeedSearch }}";
  result_count = {{ Count }}
  if(search_word != ""){
      $("#search_word").val(decodeURI(search_word));
      if(need_search){
        search_media();
      }else if(!result_count){
        $("#search_tip_title").text(search_word + " 找到未任何资源")
        $("#search_tip_text").text("")
      }
  }
  // 显示下载提示框
  function show_download_modal(id, name){
      $("#download_start_id").val(id);
      $("#download_start_name").val(name);
      $("#download_start_message").text("是否立即下载 " + name + "？");
      $('#download-modal').modal('show');
  }
  // 搜索按钮
  function search_media(){
      var cmd = "search";
      var keyword = $("#search_word").val();
      if(keyword == ""){
          return;
      }
      $("#search_btn").val("搜索中...");
      $("#search_btn").attr("disabled", "true");
      $("#search_tip_title").text("正在搜索 " + keyword + "，请稍后...");
      $("#search_tip_text").text("");
      var param = {"search_word": keyword};
      $("#modal-wait").modal("show");
      ajax_post(cmd, param, function(ret){
        $("#modal-wait").modal("hide");
          //刷新页面
          navmenu('search?s='+keyword)
      });
  }
  //点击链接下载
  function download_link(id){
      var cmd = "download";
      var data = {"id": id};
      ajax_post(cmd, data, function(ret){
         item = $("#download_start_name").val();
          $("#download_finished_str").text(item + " 添加下载成功！");
          $("#download-modal-success").modal('show');
      });
  }

  // 下载模态框事件
  $("#download_start_btn").click(function(){
      $('#download-modal').modal('hide');
      download_link($("#download_start_id").val());
  });
</script>